<script setup >
</script>
<template>
    <div class="submission-item" >
        <div class="avatar">
            <img src="/src/assets/images/student/avatar.svg" alt="Avatar" width="68">
        </div>
        <div class="info" >
            <p>XXX time</p>
        </div>
        <div class="content" >
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit 
amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et </p>
        </div>
    </div>

</template>
<style scoped >
.submission-item {
    display: grid;
    grid-template: "avatar info"
    "avatar content";
    grid-template-columns: 100px auto;
    grid-template-rows: 18px auto;
}

.submission-item > .avatar {
    grid-area: avatar;
    display: flex;
    justify-content: center;
    align-items: center;
}

.submission-item > .info {
    grid-area: info;

}

.submission-item > .info > p {
    font-family: Source Han Sans CN;
	font-size: 18px;
	font-weight: bold;

	line-height: 20px;

	color: #707070;
}

.submission-item > .content {
    grid-area: content;

}

.submission-item > .content > p {
    height: 52px;
	font-family: Source Han Sans CN;
	font-size: 16px;
	line-height: 27px;
	color: #707070;
    text-overflow: ellipsis;
    overflow: hidden;
}

</style>